<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 回流和重绘
    // 页面排版布局过程中 伴随着layout(布局) 和 print(绘制) => 合成渲染(render)

    // 当我们改变页面不会是 可以会导致页面重新渲染
    // 重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（回流 reflow），后者叫做"重绘"（repaint）。
    // "重绘"不一定需要"重排"，
    // "重排"必然导致"重绘"，

    // 哪些属性会触发回流?

    // 改变窗口大小
    // 改变文字大小
    // 内容的改变，如用户在输入框中敲字
    // 激活伪类，如:hover
    // 操作class属性
    // 脚本操作DOM
    // 设置style属性 (内联style)
    // 计算offsetWidth和offsetHeight

    // offsetTop / offsetLeft / offsetWidth / offsetHeight
    // scrollTop / scrollLeft / scrollWidth / scrollHeight
    // clientTop / clientLeft / clientWidth / clientHeight
    // getComputedStyle()

    // css
    // 涉及到盒模型改变: width height border-width padding margin
    // 涉及到元素类型转换:display  float  position
    //





    // 哪些属性会触发重绘?
    // color  border-color background



    // 减少回流重绘
    // 1：用transform 代替 top，left ，margin-top， margin-left... 这些位移属性

    // 2：用opacity 代替 visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流,但是第二点经过我的实验，发现如果不加 transform: translateZ(0) 配合opacity的话还是会产生回流的，而只用visibility 就只会产生重绘不会回流,而  opacity 加上 transform: translateZ/3d  这个属性之后便不会发生回流和重绘了

    // 3：不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之。

    // 4：如果确实需要用 js 对 dom 设置多条样式那么可以将这个dom先隐藏，然后再对其设置 (对隐藏的元素设置样式 改变内容 添加/修改/删除属性 => 不会回流)

    // 5：不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight... 这些。浏览器有一个回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。

    // 所以为了避免这个问题，应该用一个变量保存在循环体外。

    // 6：不要使用table 布局，因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局

    // 7：动画的速度按照业务按需决定。

    // 8：对于频繁变化的元素应该为其加一个 transform 属性，对于视频使用video 标签

    // 9：必要时可以开启 GPU 加速，但是不能滥用



</script>

</html>